require('../css/play.css')

window.addEventListener('load',function(){
    const BASE_URL =  'http://47.96.154.185:3701';

    let videoDom = document.querySelector('video');

    let num1 = document.querySelector('.num1');
    let num4 = document.querySelector('.num4');
    let video_text = document.querySelector('.video_text');

    let upDom = document.querySelector('#up');
    let playDom = document.querySelector('#play');
    let nextDom = document.querySelector('#next');
    
    let returnDom =  document.querySelector('.icon-xiangzuo1');

    let progress=this.document.querySelector('.progress');

    let modalDom = document.querySelector('.modal');
    let modalImgDom = document.querySelector('.modal_img img');
    let sport_nameDom = document.querySelector('.sport_name');
    let continueBtn = document.querySelector('.continue');
    let endBtn = document.querySelector('.end');

    //获取视频列表
    let videoList = JSON.parse(sessionStorage.getItem('videoList'));
    console.log(videoList);
    
    //返回按钮
    returnDom.addEventListener('click',function(){
        location.href = './sport.html';
    })

    //定义一个变量:表示当前表变量第几个
    let index = 0;
    //默认数据渲染
    function renden(){
        //当前播放的视频对象
        let videoData = videoList[index];
        
        //渲染页面
        videoDom.src = BASE_URL+videoData.videoUrl;
        num1.textContent = index+1;
        num4.textContent = videoList.length;
        video_text.innerText = videoData.title;
    }
    renden();
    console.log(videoList.length);
    

    //下一个视频切换
    nextDom.addEventListener('click',function(){
        if(index == videoList.length-1){
            utils.toast(1,'已近全部学习完了哟~')
        }
        index++;
        renden();
    })
    //上一个视频切换
    upDom.addEventListener('click',function(){
        if(index == 0){
            utils.toast(1,'已近是第一个视频了哟~')
        }
        index--;
        renden();
    })
    //监听视频结束事件
    videoDom.addEventListener('ended',function(){
        nextDom.click();
    })

    //视频进度条
    //// 每间隔固定时间 计算进度条的宽度， 宽度= 当前时间/总时间*100+'%'
    setInterval(function(){
        let w = videoDom.currentTime/videoDom.duration*100+'%';
        progress.style.width = w;
    },10);

    //暂停播放按钮
    playDom.addEventListener('click',function(){
        modalDom.style.display = 'block';
        videoDom.pause();
        //将信息渲染到蒙尘
        modalImgDom.src =  BASE_URL+videoList[index].imgUrl;
        sport_nameDom.innerText = videoList[index].title;
    })

    //点击模态框继续训练按钮
    continueBtn.addEventListener('click',function(){
        modalDom.style.display = 'none';
        videoDom.play();
    })

    //点击模态框结束训练按钮
    endBtn.addEventListener('click',function(){
        location.href = './sport.html';
    })

})